import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import './index.less'

interface MainProps {

}
interface MainState {
  isShowLoading: boolean
  percent: number
}
export default class Main extends Component<MainProps, MainState> {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  constructor(props: MainProps) {
    super(props)
    this.state = {
      isShowLoading: false,
      percent: 0
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState({
        isShowLoading: true
      })
    }, 2000)
  }

  componentDidMount() {
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='main'>
        <View className='items'>Demo 小例子</View>
        <View className='items'><Button onClick={this.handleChapter1}>加载球</Button></View>
        <View className='items'><Button onClick={this.handleChapter2}>阅读器</Button></View>
      </View>
    )
  }

  handleChapter1 = () => {
    Taro.navigateTo({
      url: '../chapter1/index'
    })
  }
  handleChapter2 = () => {
    Taro.navigateTo({
      url: '../chapter2/index'
    })
  }
}

